<template>
  <view>
    <view class="imgback">
      <image class="img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
    </view>
    <view class="detail">
      <view class="top bottom_line">
        <view class="title">
          日常清洁 2小时1人急速清洁全程质保
        </view>
        <view class="price">
          ￥300.00
        </view>
        <view class="star flex">
          <u-rate :count="count" v-model="value" :disabled="true" active-color="rgb(255, 166, 0)"></u-rate>
          <view class="point">
            5.0
          </view>
          <view class="comment">
            (2000人评论)
          </view>
        </view>
      </view>
      <view class="serve_detail bottom_line">
        <view class="title">服务内容</view>
      </view>
      <view class="serve_detail bottom_line">
        <view class="title">服务人员</view>
      </view>
      <view class="serve_detail bottom_line">
        <view class="title">服务详情</view>
        <view>
          服务通常包括清洁地面、家具、门窗、厨房和卫生间等区域，去除灰尘、污垢、油渍等杂质，
          保持各个区域的卫生和整洁。在清洁过程中，专业的清洁人员会使用各种清洁工具和化学药剂，
          如吸尘器、拖把、清洁剂、玻璃水等，以确保各个区域都得到充分的清洁和护理。
        </view>
      </view>
      <view class="serve_detail">
        <view class="title">购买须知</view>
        <view>
          有效期 购买后60天内有效

          预约规则 请按时消费，预约后服务前2小时内可退
        </view>
      </view>
    </view>
    <view class="foot">
      <view class="bottom">
        <view class="pbtn" @click="goBuy()">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: 5,
      value: 5
    };
  },
  methods: {
    goBuy(){
      this.$u.route({
				url: 'pages/housekeeperOrder/pickTimeASpace'
			})
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.imgback {
  .img {
    width: 100%;
  }
}

.bottom_line {
  border-bottom: 1rpx solid rgb(204, 203, 203);
}

.detail {
  width: 750rpx;
  position: relative;
  background-color: white;
  border-radius: 30rpx 30rpx 0 0;
  top: -50rpx;
  padding: 30rpx;

  .top {
    .title {
      font-size: 40rpx;
    }

    .price {
      font-size: 40rpx;
      color: #fc8881;
    }
  }

  .serve_detail {
    .title {
      font-size: 35rpx;
    }

    .l {
      color: rgb(204, 203, 203);
    }
  }
}

.foot {
  height: 150rpx;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding-top: 20rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.bottom {
  display: flex;
  margin-top: 20rpx;
  padding: 0 20rpx;
  justify-content: flex-end;
  align-items: center;

  .pbtn {
    height: 70rpx;
    line-height: 65rpx;
    width: 100%;
    padding-top: 0rpx;
    display: inline-block;
    white-space: nowrap;
    border-radius: 26rpx;
    font-size: 26rpx;
    text-align: center;
    color: white;
    background-color: #6c76f4;
    border: 2rpx solid #6c76f4;
  }
}
</style>